<template>
  <div class="w-h-full">
    <!--<img :src="imageSrc" :style="Object.assign({
      width: component.compConfigData.width,
      height: component.compConfigData.height
    }, $PnUtil.cssToVueStyleObj(component.compConfigData.customStyleCode))" :onerror="defaultImg"/>-->
    <!--组件遮罩层，用于在设计器中显示-->
    <div v-if="shade" class="shade"></div>

    <div class="w-h-full" :style="{
      backgroundImage: 'url('+imageSrc+')',
      backgroundRepeat: component.compConfigData.backgroundRepeat,
      backgroundSize: component.compConfigData.backgroundSize,
      backgroundPosition: 'center',
      opacity: component.compConfigData.opacity,
      animation: imageAnimation,
      borderRadius: component.compConfigData.borderRadius + 'px',
      cursor: component.compConfigData.imageHref ? 'pointer': 'default'
    }" @click.stop="imageDivClick" @mouseenter.stop="mouseenterHandle" @mouseleave.stop="mouseleaveHandle"></div>
  </div>
</template>

<script>

  import './ImageComp.css'

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  const _this = {
    name: 'ImageComp',
    mixins: [FuncCompMixin],
    attr: {
      version: '2.2',
      configDataTemp: Object.assign({
        relativePath: '',
        width: '100%',
        height: '100%',

        backgroundRepeat: 'no-repeat',
        backgroundSize: 'contain',
        opacity: 1,
        animation: '',
        animationDelay: 10,
        borderRadius: 0,

        useLink: false,
        imageHref: '',
        hrefTarget: '_self',

        clickHandleScript: ''

      }, PnDesigner.buildFuncCompDatasourceField({
        ds_resultObjTemplate: [
          {
            field: 'url',
            remark: '图片路径'
          }
        ],
        ds_resultObj: [
          {
            "url": ""
          }
        ],
        ds_useFilter: true,
        ds_useTimer: true,
      }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildFuncCompInteractionConfiguration(), PnDesigner.buildMouseInteractionConfiguration())
    },
    data() {
      return {

      }
    },
    mounted() {
      this.init();

      this.setTimer(() => { //定时器，如果当前组件不使用定时器，可以将此段代码删除
        this.init()
      })
    },
    methods: {
      init () { // 组价初始化函数，函数名必须使用init，不可更改
        this.initDatasource(() => {
          this.runCustomGlobalJsCode()
        }, (result) => {
          this.runCustomGlobalJsCode()
        });
      },
      imageDivClick () {
        if (this.component.compConfigData.useLink) {
          this.$PnUtil.jumpLink(this.component.compConfigData.imageHref, this.component.compConfigData.hrefTarget)
        }else {
          this.$PnDesigner.launchMouseInteraction(this.component.compConfigData, 'click');
          eval(this.component.compConfigData.clickHandleScript)
        }
      },

      mouseenterHandle () {
        this.$PnDesigner.launchMouseInteraction(this.component.compConfigData, 'mouseenter');
      },
      mouseleaveHandle () {
        this.$PnDesigner.launchMouseInteraction(this.component.compConfigData, 'mouseleave');
      }
    },
    computed: {
      imageSrc () {
        // return window.g.AXIOS_BASE_URL + '/' + this.component.compConfigData.relativePath + '?v=' + this.$PnUtil.getTimestamp()
        let defaultImg = require('@/assets/image/default-img.png');
        if (this.component.compConfigData.relativePath) {
          return window.g.AXIOS_BASE_URL + this.component.compConfigData.relativePath
        } else {
          try {
            let url = this.runCustomFilter(this.component.compConfigData.ds_resultObj)[0].url;
            if (url) {
              return url
            } else {
              return defaultImg
            }
          }catch (e) {
            return defaultImg
          }
        }
      },
      imageAnimation () {
        if (this.component.compConfigData.animation) {
          return this.component.compConfigData.animation
            + ' ' + this.component.compConfigData.animationDelay+'s linear infinite'
        }else {
          return ''
        }
      }
    },
    watch: {

    }
  };

  export default _this
</script>

<style scoped>

</style>
